// pages/home/dataAnalysis/dataAnalysis.js
import * as API from '../../../api/homeApi';
import * as util from '../../../utils/util';
import NumberAnimate from '../../../utils/numberAnimate';

function animateValue(key, value, that) {
  let obj = new NumberAnimate({
    to: value,
    onUpdate: () => { //更新回调函数
      that.setData({
        [key]: obj.currentValue
      });
    },
    onComplete: () => { //完成回调函数
      that.setData({
        [key]: value
      });
    }
  });
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    radarImgShow: false,
    showCanvas: true,
    drop1: {
      dropdata: [{
          id: 0,
          text: '最近30天',
          value: 30
        },
        {
          id: 1,
          text: '最近一年',
          value: 365
        },
        {
          id: 2,
          text: '全部',
          value: ''
        }
      ],
      showIndex: 0,
      dropShow: false,
    },
    drop2: {
      dropdata: [{
          id: 0,
          text: '全部',
          value: ''
        },
        {
          id: 1,
          text: '最近30天',
          value: 30
        },
        {
          id: 2,
          text: '最近一年',
          value: 365
        }
      ],
      showIndex: 0,
      dropShow: false,
    },
    option1: {
      color: ["#1c82d4", "#f6a621", "#ff0000"],
      grid: {
        containLabel: true,
        top: 0,
        bottom: 10,
        left: 20,
        right: 20
      },
      xAxis: {
        type: 'value',
        boundaryGap: false,
        min: 0,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          lineStyle: {
            color: '#f9f9f9'
          }
        },
      },
      yAxis: {
        type: 'category',
        min: 1,
        max: 1,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        data: ['分享总数', '浏览总数', '关注总数'],
      },
      series: [{
        type: 'bar',
        barWidth: 15,
        barGap: '220%',
        data: [0]
      }, {
        type: 'bar',
        barWidth: 15,
        barGap: '220%',
        data: [0]
      }, {
        type: 'bar',
        barWidth: 15,
        barGap: '220%',
        data: [0]
      }]
    },
    option2: {
      color: ["#1c82d4", "#f6a621", "#ff0000"],
      grid: {
        containLabel: true,
        top: 0,
        bottom: 10,
        left: 20,
        right: 20
      },
      xAxis: {
        type: 'value',
        boundaryGap: false,
        min: 0,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          lineStyle: {
            color: '#f9f9f9'
          }
        },
      },
      yAxis: {
        type: 'category',
        min: 1,
        max: 1,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        data: ['分享总数', '浏览总数', '关注总数'],
      },
      series: [{
        type: 'bar',
        barWidth: 15,
        barGap: '220%',
        data: [0]
      }, {
        type: 'bar',
        barWidth: 15,
        barGap: '220%',
        data: [0]
      }, {
        type: 'bar',
        barWidth: 15,
        barGap: '220%',
        data: [0]
      }]
    },
    option3: {
      color: ["#1c82d4", "#f6a621", "#ff0000"],
      grid: {
        containLabel: true,
        top: 0,
        bottom: 10,
        left: 20,
        right: 20
      },
      xAxis: {
        type: 'value',
        boundaryGap: false,
        min: 0,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          lineStyle: {
            color: '#f9f9f9'
          }
        },
      },
      yAxis: {
        type: 'category',
        min: 1,
        max: 1,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        data: ['分享总数', '浏览总数', '关注总数'],
      },
      series: [{
        type: 'bar',
        barWidth: 15,
        barGap: '220%',
        data: [0]
      }, {
        type: 'bar',
        barWidth: 15,
        barGap: '220%',
        data: [0]
      }, {
        type: 'bar',
        barWidth: 15,
        barGap: '220%',
        data: [0]
      }]
    },
    loaded_trade: false,
    loaded_share: false,
    share: {
      attentionOrderNum: '--',
      shareOrderNum: '--',
      sharePeopleNum: '--',
      shareScanNum: '--'
    },
    trade: {
      cancelOrderNum: '--',
      finishedOrderNum: '--',
      overdueOrderNum: '--',
      unfinishedOrderNum: '--'
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log("onShow")
    this.getShareData(this.data.drop1.showIndex);
    this.getTradeData(this.data.drop2.showIndex);
  },
  hideDrop1: function (e) {
    this.setData({
      'drop1.dropShow': false,
      'radarImgShow': false,
      showCanvas: true
    });
  },
  hideDrop2: function (e) {
    this.setData({
      'drop2.dropShow': false,
      'radarImgShow': false,
      showCanvas: true
    });
  },
  showDrop1: function (e) {
    this.setData({
      'drop1.dropShow': true,
      'radarImgShow': true,
      showCanvas: false
    });
    // console.log()
    console.log('buxing', this.data.radarImgShow)
  },
  showDrop2: function (e) {
    this.setData({
      'drop2.dropShow': true,
      'radarImgShow': true,
      showCanvas: false
    });
  },
  chartSelect: function (e) {
    this.getShareData(e.detail.index);
  },
  tradeSelect: function (e) {
    console.log("41324")
    this.getTradeData(e.detail.index);
  },
  getShareData: function (index) {
    let data = this.data.drop1.dropdata[index];
    API.getShareDataSta(data.value).then(res => {
      let ec = 'option' + (index + 1);
      let option = this.getChartOption(index, res);
      animateValue('share.attentionOrderNum', res.attentionOrderNum || 0, this);
      animateValue('share.shareOrderNum', res.shareOrderNum || 0, this);
      animateValue('share.sharePeopleNum', res.sharePeopleNum || 0, this);
      animateValue('share.shareScanNum', res.shareScanNum || 0, this);
      this.setData({
        [ec]: option,
        'drop1.showIndex': index,
        'drop1.dropShow': false,
        'radarImgShow': false,
        'loaded_trade': true
      });
      console.log('ok', this.data.radarImgShow)
    }, err => {
      this.setData({
        'share.attentionOrderNum': '--',
        'share.shareOrderNum': '--',
        'share.sharePeopleNum': '--',
        'share.shareScanNum': '--',
        'drop1.dropShow': false,
        'radarImgShow': false,
        'loaded_trade': false
      });
      util.toast(err);
    });
  },
  getChartOption: function (index, data) {
    let option = this.data['option' + (index + 1)];
    //TODO: build option here
    option.series[0].data = [data.shareOrderNum || 0];
    option.series[1].data = [data.shareScanNum || 0];
    option.series[2].data = [data.sharePeopleNum || 0];
    return option;
  },
  getTradeData: function (index) {
    let data = this.data.drop2.dropdata[index];
    API.getTradingDataSta(data.value).then(res => {
      animateValue('trade.cancelOrderNum', res.cancelOrderNum || 0, this);
      animateValue('trade.finishedOrderNum', res.finishedOrderNum || 0, this);
      animateValue('trade.overdueOrderNum', res.overdueOrderNum || 0, this);
      animateValue('trade.unfinishedOrderNum', res.unfinishedOrderNum || 0, this);
      this.setData({
        'drop2.showIndex': index,
        'drop2.dropShow': false,
        'radarImgShow': false
      });
    }, err => {
      this.setData({
        'trade.cancelOrderNum': '--',
        'trade.finishedOrderNum': '--',
        'trade.overdueOrderNum': '--',
        'trade.unfinishedOrderNum': '--',
        'drop2.dropShow': false,
        'radarImgShow': false
      });
      util.toast(err);
    });
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  }

})